<template>
  <div v-show="todos.length">
    <input id="checkBox" type="checkbox" :checked="ifAll" v-model="ifAll">
    <label for="checkBox">已完成{{ alreadyTodo }} / 全部 {{ todos.length }}</label>
    <button @click="$emit('delDone')">清除已完成任务</button>
  </div>
</template>

<script>

export default {
    name: "MyFooter",
    props: ['todos'],
    computed: {
        // pre为上一次迭代的返回值，current为当前迭代器，0为初始值
        alreadyTodo() {
            return this.todos.reduce((pre, current) => pre + (current.done ? 1 : 0), 0)
        },
        ifAll: {
            get() {
                return this.alreadyTodo === this.todos.length
            },
            set() {
                this.$emit('reverseSelect', !this.ifAll)
            }
        }
    }
}
</script>

<style scoped>
    button {
        visibility: visible;
        float: right;
    }
    input[type=checkbox] {
        margin-right: 20px;        
    }
    label {
        cursor: pointer;
    }
</style>